<template>
  <div>
    部门管理
    <ul>
      <li>
        按姓名查找：<input v-model="message" />
        <button @click="right()">升序</button>
        <button @click="num=0">原顺序</button>
      </li>
      <li v-for="value in fileterName" :key="value.id">
        id:{{ value.id }},age:{{ value.age }},name:{{ value.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "DepartmentManage",
  data() {
    return {
      name: [
        { id: 1, age: 19, name: "王五" },
        { id: 2, age: 29, name: "李四" },
        { id: 3, age: 9, name: "张三" },
      ],
      num: 0,
      message: "",
    };
  },
  methods: {
    right() {
      this.num = 1;
    },
  },
  computed: {
    fileterName() {
      let arr = this.name.filter((p) => {
        return p.name.indexOf(this.message) !== -1;
      });
      if (this.num == 1) {
        arr.sort((p1, p2) => {
          return p1.age - p2.age;
        });
      }

      return arr;
    },
  },
};
</script>

<style scoped>
div {
  font-size: 80px;
}
</style>